{% load staticfiles %}
{% verbatim %}
<div id="navbar" class="wrap">
    <form @submit.prevent="search()">
        <div id="app2" class="search clearfix">
            <div class="fl">
                <ul>
                    <li class="bold">房屋信息</li>
                    <li>标题：
                        <input type="text" class="text" v-model="title" @keydown.enter="search()">
                        <label class="ui-blue">
                        <input type="submit" name="search" value="搜索房屋">
                    </label>
                    </li>
                </ul>
            </div>
            <div class="fl">
                <ul>
                    <li class="first">价格</li>
                    <li>
                        <select v-model="price">
                            <option value='0-99999999'>不限</option>
                            <option value='0-2000'>2000元以下</option>
                            <option value='2000-3000'>2000元—3000元</option>
                            <option value='3000-5000'>3000元—5000元</option>
                            <option value='5000-10000'>5000元—10000元</option>
                            <option value='10000-20000'>10000元—20000元</option>
                            <option value='20000-99999999'>20000元以上</option>
                        </select>
                    </li>
                </ul>
            </div>
            <div class="fl">
                <ul>
                    <li class="first">房屋位置</li>
                    <li>
                        省
                        <select v-model.number="provId" @change="selectProv()">
                            <option value="0">请选择</option>
                            <option v-for="district in provinces" :value="district.distid">{{ district.name }}</option>
                        </select>
                        市
                        <select v-model.number="cityId" @change="selectCity()">
                            <option value="0" :selected="cities.length == 0">请选择</option>
                            <option v-for="district in cities" :value="district.distid">{{ district.name }}</option>
                        </select>
                        区
                        <select v-model.number="countyId">
                            <option value="0" :selected="counties.length == 0">请选择</option>
                            <option v-for="district in counties" :value="district.distid">{{ district.name }}</option>
                        </select>
                    </li>
                </ul>
            </div>
            <div class="fl">
                <ul>
                    <li class="first">房型</li>
                    <li>
                        <select v-model="housetype">
                            <option value="0">不限</option>
                            <option v-for="housetype in housetypes" :value="housetype.typeid">{{ housetype.name }}</option>
                        </select>
                    </li>
                </ul>
            </div>
            <div class="fl">
                <ul>
                    <li class="first">面积</li>
                    <li>
                        <select v-model="area">
                            <option value="0-9999999">不限</option>
                            <option value="0-50">50以下</option>
                            <option value="50-100">50-100</option>
                            <option value="100-200">100-200</option>
                            <option value="200-9999999">200以上</option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>
{% endverbatim %}
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    const app2 = new Vue({
        el: '#navbar',
        data: {
            housetypes: [],
            provinces: [],
            cities: [],
            counties: [],
            title: '',
            price: '0-99999999',
            provId: 0,
            cityId: 0,
            countyId: 0,
            housetype: 0,
            area: '0-9999999'
        },
        created() {
            fetch('/api/housetypes')
                .then(resp => resp.json())
                .then(json => this.housetypes = json)
            fetch('/api/districts')
                .then(resp => resp.json())
                .then(json => this.provinces = json)
        },
        methods: {
            selectProv() {
                this.cities = []
                this.counties= []
                if (this.provId != 0) {
                    fetch('/api/districts/' + this.provId)
                        .then(resp => resp.json())
                        .then(json => this.cities = json.cities)
                }
            },
            selectCity() {
                this.counties = []
                fetch('/api/districts/' + this.cityId)
                    .then(resp => resp.json())
                    .then(json => this.counties = json.cities)
            },
            search() {
                url = '/api/houseinfos/?'
                let title = this.title.trim()
                if (title.length > 0) {
                    url += `title=${title}&`
                }
                let prices = this.price.split('-')
                minprice = prices[0]
                maxprice = prices[1]
                url += `minprice=${minprice}&maxprice=${maxprice}&`
                if (this.cityId != 0) {
                    if (this.countyId != 0) {
                        url += `district=${this.countyId}`
                    } else {
                        url += `district=${this.cityId}`
                    }
                }
                fetch(url).then(resp => resp.json())
                    .then(json => app.houses = json.results)
            }
        }
    })
</script>